<template>
  <div>
    <vxe-table
      ref="editable"
      v-loading="loading"
      :data="tableColList"
      class="vxe-table-element"
      auto-resize
      max-height="500"
      :edit-config="{
                  trigger: 'click',
                  mode: 'cell',
                  autoClear: true
                  }"
      style="width: 100%;">
      <vxe-table-column
        type="index"
        fixed="left"
        width="50"></vxe-table-column>
      <vxe-table-column
        field="columnName"
        fixed="left"
        title="字段名" width="100"></vxe-table-column>
      <vxe-table-column
        field="columnType"
        title="字段类型"
        fixed="left"
        width="100"></vxe-table-column>
      <vxe-table-column
        field="comments"
        title="字段说明"
        fixed="left"
        width="120"></vxe-table-column>
      <vxe-table-column
        :header-align="'center'"
        title="编辑表单设置">
        <vxe-table-column
          field="isList"
          title="显示列"
          :edit-render="{type: 'default'}"
          width="80">
          <template v-slot:edit="scope" @change="$refs.editable.updateStatus(scope)">
            <el-checkbox v-model="scope.row.isList" true-label="1" false-label="0"></el-checkbox>
          </template>
          <template v-slot="{ row }">
            <el-tag :type="getTagType(row.isList)">{{ getTagLable(row.isList) }}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="isEdit"
          title="编辑"
          :edit-render="{type:'default'}"
          width="80">
          <template v-slot:edit="scope" @change="$refs.editable.updateStatus(scope)">
            <el-checkbox v-model="scope.row.isEdit" true-label="1" false-label="0"></el-checkbox>
          </template>
          <template v-slot="{ row }">
            <el-tag :type="getTagType(row.isEdit)">{{ getTagLable(row.isEdit) }}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="formatType"
          title="格式"
          width="80"
          :edit-render="{name: 'ElSelect',type:'default',
          options:formatList,fields:{clearable:true},optionProps:optionfields}">
        </vxe-table-column>
        <vxe-table-column
          field="alignType"
          title="对齐"
          width="80"
          :edit-render="{name: 'ElSelect',type:'default',
          options:alignList,fields:{clearable:true},optionProps:optionfields}">
        </vxe-table-column>
        <vxe-table-column
          field="widthType"
          title="宽度"
          width="80"
          :edit-render="{name: 'ElSelect',type:'default',
          options:widthList,fields:{clearable:true},optionProps:optionfields}">
        </vxe-table-column>
        <vxe-table-column
          field="showType"
          title="表单类型"
          width="140"
          :edit-render="{name: 'ElSelect',type:'default',options:showTypeList,optionProps:optionfields}"></vxe-table-column>
        <vxe-table-column
          field="totalType"
          title="合计列"
          width="80"
          :edit-render="{name: 'ElSelect',type:'default',
          options:totalTypeList,fields:{clearable:true},optionProps:optionfields}">
        </vxe-table-column>
        <vxe-table-column
          field="dictType"
          title="字典类型"
          width="180"
          headerAlign="center"
          align="left"
          :edit-render="{name: 'ElSelect',type:'default',options:dictList,props:{clearable:true},optionProps:{ value: 'key', title: 'key' }}">
          <template v-slot="{ row }">
            {{ row.dictType }}
          </template>
        </vxe-table-column>
        <vxe-table-column
          field="valids"
          title="验证类型"
          width="320"
          headerAlign="center"
          align="left"
          :edit-render="{name: 'ElSelect',type:'default',options:validList,props: {multiple: true},optionProps:optionfields}"></vxe-table-column>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data () {
    return {
      loading: false,
      tableColList: [],
      deltList: [],
      formatList: this.$getDictList('GEN_FORMAT_TYPE', true),
      alignList: this.$getDictList('GEN_ALIGN_TYPE', true),
      widthList: this.$getDictList('GEN_WIDTH_TYPE', true),
      totalTypeList: this.$getDictList('GEN_TOTAL_TYPE', true),
      javaFieldList: this.$getDictList('GEN_JAVA_FIELD_TYPE', true),
      queryTypeList: this.$getDictList('GEN_QUERY_TYPE', true),
      showTypeList: this.$getDictList('GEN_EDIT_TYPE', true),
      layoutList: this.$getDictList('GEN_EDIT_LAYOUT', true),
      validList: this.$getDictList('GEN_VALID_TYPE', true),
      dictList: window.SITE_CONFIG['dictData'],
      optionfields: { value: 'val', title: 'title' },
      dsCode: '',
      tableName: '',
      childTableCode: ''
    }
  },
  methods: {
    init () {
      this.loading = true
      this.$nextTick(() => {
        this.getInfo()
      })
    },
    getTagType (val) {
      if (val === '1') {
        return 'success'
      } else {
        return 'danger'
      }
    },
    getTagLable (val) {
      if (val === '1') {
        return '是'
      } else {
        return '否'
      }
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/gen/genTableColumn/childColListByTableName?dsCode=${this.dsCode}&tableName=${this.tableName}&childTableCode=${this.childTableCode}`)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return false
          }
          this.tableColList = res.data.filter((value, index, array) => {
            return value.isDelt === '0'
          })
          this.deltList = res.data.filter((value, index, array) => {
            return value.isDelt === '1'
          })
        }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      if (this.tableColList.length <= 0) {
        this.$message({
          message: '表字段信息不能为空',
          type: 'error',
          duration: 1500
        })
        return false
      }
      this.$http.post('/gen/genTableColumn/saveOrUpdate', {
        'colList': this.tableColList,
        'deltList': this.deltList
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.$emit('setActiveName', 'gene', this.dsCode, this.tableName, this.childTableCode)
          }
        })
      }).catch(() => {})
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
